<template>
   <div class="reservation-record-background">
        <van-row type="flex" class="reservation-record-title">
            <van-col span="24">{{list.length>0?'以下是您的':'暂无'}}预约记录</van-col>
        </van-row>
        <!-- finished  是否已加载完成，加载完成后不再触发load事件 Boolean false -->
        <van-list v-model="loading" :finished="finished" @load="onLoad" loading-text='拼命加载中...' style="background:#f7f6f6;padding-bottom: 20px">
            <van-cell v-for="item in list" :key="item.reserveId" class="reservation-record-cell">
                <van-row style='margin-bottom: 10px'>
                    <van-col span="12" v-carplate-text='[item.carno,item.plateColor]'></van-col>
                    <van-col span="6" v-if='showOpenLock(item)' offset='6' style='text-align: center;color: #ffffff;background: #3DA6FF' @click.native='openLock(item);'>开地锁</van-col>
                </van-row>
                <hr>
                <van-row style='margin-bottom: 10px'>
                    <van-col span="24" class="reservation-record-date">
                        预约开始时间：{{item.advanceTime}}</van-col>
                    <van-col span="24" class="reservation-record-date">
                        预约结束时间：{{item.time}}</van-col>
                    <van-col span="24" class="reservation-record-date">
                        预约车场：{{item.parkname}}</van-col>
                    <van-col span="24" class="reservation-record-date">
                        泊位号：{{item.placeno}}</van-col>
                </van-row> 
                <hr>
                <van-row>
                    <van-col span="24" offset=0 style='text-align: right;'>支付金额:
                        <span class="reservation-record-money">
              {{item.cost|formatMoney('￥',2)}}
            </span></van-col>
                </van-row>
                 <hr>
                <van-row style='margin-bottom: 10px' class='search-veh-button'>     
                <!-- @click.native="navigationVeh(item)"              -->
                            <van-col span="24" offset=0 >
                                 地图：
                                <van-button type="primary" size="small" @click.stop="navigationVehTX(item)">腾讯</van-button>
                                <van-button type="primary" size="small" @click.stop="navigationVehBD(item)">百度</van-button>
                                <van-button type="primary" size="small" @click.stop="navigationVehGD(item)">高德</van-button>
                                <van-button :disabled="!showPMTStatus(item)" type="primary" size="small" @click.stop="showPMT(item)">平面图</van-button>
                            </van-col>
                </van-row>
            </van-cell>
        </van-list>
    </div>
</template>
<script>
import { getPayorder,AdvanceService,GuidanceService } from './api';
import chechang from './chechang'
import moment from 'moment';
import { Toast } from 'vant';
import  geo from '../../utils/geolocation'
let geolocation = new geo("FYXBZ-5YDCW-ILWRQ-OOWLM-AJV7Z-QNFH7", "ZQwechat");
export default {
    name: 'reservationRecord',
    data() {
        return {  
            list:[],        
            loading: false,
            finished: false,
            ZQCode:'',
            myPosi:{}
        };
    },
    created() {
      let code=this.$route.query.code;
      this.ZQCode=code;
      this.getLocation();
    },
    getEndTime(time,h){
     return   moment(time).add(h, 'hours');
    },
    mounted() {  
 this.finished=false;
       },
    methods: {
        onLoad: function() {
          this.getPayCord(this.ZQCode);
          this.loading=false;
          this.finished=true;
        },
        showOpenLock(item){
          return  moment().isBefore(item.time);
        },
        openLock(item){
            AdvanceService.openLock(item.placeid,item.reserveId).then((res)=>{          
            Toast.success('开锁成功'); 
        },(err)=>{
           Toast.fail('开锁失败，请重试');
        })      
        },
      //获取预约记录
      getPayCord(code){
        getPayorder(code).then((res)=>{
          this.list=res;
        },(err)=>{
        })
      },
        getLocation() {
            geolocation.getLocation((position) => {
                this.myPosi = position;
            }, (err) => {
            }, { timeout: 8000 })

        },
        navigationVeh(item) {
        let url=`https://map.qq.com/nav/drive#walk?sword=我的位置&eword=${item.parkname}${item.placeno ? '（泊位号%3A' + item.placeno+'）' : ''}&dest=${item.txLng}%2C${item.txLat}&start=${this.myPosi.lng}%2C${this.myPosi.lat}&referer=ZQwechat`;
            window.location.href=url;
        },
        navigationVehTX(item){
        this.navigationVeh(item);
        },
        navigationVehBD(item){
        GuidanceService.getBaiduCoordinates(this.myPosi.lng,this.myPosi.lat).then((res)=>{
         let url=`http://api.map.baidu.com/direction?origin=latlng:${res.lat},${res.lng}|name:我的位置&destination=latlng:${item.lat},${item.lng}|name:${item.parkname}${item.placeno ? '（泊位号%3A' + item.placeno+'）' : ''}&mode=driving&region=济南&output=html&src=th.zq`;
            window.location.href=url;
                },(err)=>{
                  // alert('请刷新页面重试')
                })
        },
        navigationVehGD(item){
            let url=`https://uri.amap.com/navigation?from=${this.myPosi.lng}%2C${this.myPosi.lat},我的位置&to=${item.txLng}%2C${item.txLat},${item.parkname}${item.placeno ? '（泊位号%3A' + item.placeno+'）' : ''}&mode=walk&policy=1&src=mypage&coordinate=gaode&callnative=0`;
            window.location.href=url;
        },
        showPMTStatus(item){
            return Object.keys(chechang).indexOf(item.jgParkno)>-1;
        },
        showPMT(item){
            item.parkNo=item.jgParkno;
            this.$router.push({name:'chpmt',params:item});
        }
    },
    watch:{
      '$route'(){
        //this.$route.query.code
      }

    },
};
</script>
<style scoped="">
.van-button--primary {
    background-color: #4797fd;
    border: 1px solid #94d6ff;
}

.reservation-record-background {
    position: relative;
    left: 0px;
    top: 0px;
    background: #f7f6f6;
    height: 100vh;
}

.reservation-record-title {
    color: #3DA6FF;
    text-align: center;
    padding: 20px;
}

.reservation-record-cell {
    margin: 10px 7%;
    width: 86%;
}

.reservation-record-date {
    color: #797979;
}

.reservation-record-money {
    color: #FF8D00
}
</style>
